<template>
    <div>
        <a-form :form="form" style="max-width: 50%;  margin: 30px auto 0;">
            <!-- 请输入任务名称 -->
            <a-form-model-item label="任务名称" prop="请输入任务名称">
                <a-input :value="iptValue" placeholder="请输入任务名称" @change="handleval" />
            </a-form-model-item>

            <!-- 填报周期 -->
            <a-form-model-item label="填报周期">
                <a-range-picker :ranges="{ Today: [moment(), moment()], 'This Month': [moment(), moment().endOf('month')] }"
                    @change="onChange" />
            </a-form-model-item>

            <!-- 请选择模板 -->
            <a-form-model-item label="请选择模板" class="formSty">
                <a-select :default-value="defaultValue" style="width: 150px; margin-right: 20px;" @change="handleChange">
                    <a-select-option :value="item.name" v-for="(item, index) in dataSource" :key="index">{{ item.name
                    }}</a-select-option>
                </a-select>

                <a-button type="primary" @click="buttonTemplate">
                    自定义模板
                </a-button>
            </a-form-model-item>

            <div class="btnStyle">
                <a-form-item :wrapperCol="{ span: 24, offset: 5 }">
                    <a-button class="btnLast" type="primary" @click="nextStep">下一步</a-button>
                </a-form-item>
            </div>
            <!-- 增加模板选中按钮 -->
        </a-form>

        <!-- <a-button type="primary" @click="nextStep" style="margin: 0 auto;">
            下一步
        </a-button> -->
    </div>
</template>

<script>
import moment from 'moment';
import axios from 'axios';
export default {
    data() {
        return {
            form: null,  // 手机表单中的数据
            // 获取任务名称
            iptValue: '',
            // 开始时间
            dateStrings: '',
            // 结束时间
            dateStringsEnd: '',
            selectValue: '',
            defaultValue: '请选择默认模板',
            dataSource: [],
        }
    },
    created() {
        this.form = this.$form.createForm(this)
    },
    mounted() {

        this.iptValue = ''
        // 获取定义模板的数据
        this.templateTabdta()
    },

    methods: {

        // 获取数据
        async templateTabdta() {

            const result = await axios.get('/mock/templateManagementTabdata')
            this.dataSource = result.data.data
        },

        // 获取任务名称
        handleval(e) {
            this.iptValue = e.target.value
        },

        moment,

        // 填报时间
        onChange(dates, dateStrings) {
            this.dateStrings = dateStrings[0]
            this.dateStringsEnd = dateStrings[1]
            // console.log('From: ', dates[0], ', to: ', dates[1]);
            // console.log('From: ', dateStrings[0], ', to: ', dateStrings[1]);
        },

        // 点击模板发生变化
        buttonTemplate() {
            this.$bus.$emit('pages', 1)
            // 收集数据
            let formInfo = {
                // 任务名称
                taskName: this.iptValue,
                // 开始时间
                scope3: this.dateStrings,
                // 结束时间
                scope4: this.dateStringsEnd,
                // 操作
                action: ['edit', 'del']
            }

            localStorage.setItem('formInfoValue', JSON.stringify(formInfo))
            // console.log(formInfo,'///点击自定义的')
            // this.$bus.$emit('formInfoValue', formInfo)

        },

        // 选中选择器的值
        handleChange(value) {
            this.selectValue = value

        },

        // 下一步
        nextStep() {
            // 收集数据
            let formInfo = {
                // 任务名称
                taskName: this.iptValue,
                // 开始时间
                scope3: this.dateStrings,
                // 结束时间
                scope4: this.dateStringsEnd,
                // 操作
                action: ['edit', 'del']

            }

            localStorage.setItem('addkey', JSON.stringify(formInfo))


            if (this.selectValue) {

                this.$bus.$emit('pages', 2)
                setTimeout(() => {
                    this.$bus.$emit('filtertable', this.selectValue)
                },);
            } else {
                this.$message.warning('请选择模板或自定义模板')
            }

        }

    }
}
</script>

<style scoped>
.btnStyle {
    margin: 5% 40%;
}
</style>